import {watch, computed, ref} from "vue"
import uiStore from "@/apps/admin/store/ui";
import store from "@/store/index"
/**
 * UI配置HOOK
 * @param themeChange
 */
export function useUiConfigure(themeChange?: (name: string) => void) {
    const ustore = uiStore(store)

    //监控主题变化
    watch(() => ustore.theme, (theme) => {
        themeChange && themeChange(theme)
    }, {
        immediate: true
    })

    return {
        //设置主图配色
        setTheme(theme: string) {
            ustore.setTheme(theme)
        },
        //设置菜单配色
        setMenuTheme(conf: { ActiveTextColor: string, BackgroundColor: string, TextColor: string }) {
            ustore.setMenuTheme(conf)
        },
        //设置菜单宽度
        setMenuWidth(width: number) {
            ustore.setMenuWidth(width)
        },
        setUiSize(size: 'default' | 'small' | 'large') {
            ustore.setUiSize(size)
        },
        size: computed(() => ustore.size),//UI大小
        MenuWidth: computed(() => ustore.menuWidth),//菜单宽度
        BindMenuWidth: computed(() => ustore.menuWidth + 'px'),//绑定菜单宽度
        MenuTheme: computed(() => ustore.menuStyle),//菜单主题
    }
}


/**
 * 菜单配置HOOK
 */
export function useMenu() {
    //菜单折叠状态
    const collapse = ref(false)

    return {
        collapse,

        ToggleCollapse() {
            collapse.value = !collapse.value
        }
    }
}